<template>
	<view :style="{height}">
		<view id="loadmore">
			<view :style="{padding: `${emptyMarginTop} 0`}" v-if="status == 'nomore' && empty">
				<u-empty mode="order"
					:text="emptyText"
					textColor="#666666"
					textSize="36rpx"
					:icon="emptyIcon"
					:width="emptySize"
					:height="emptySize"
				>
				<text style="color: #999999;font-size: 24rpx;margin-top: 20rpx;" v-if="emptyDesc">{{emptyDesc}}</text>
				</u-empty>
			</view>
			<u-loadmore :status="status" loadmoreText="上拉加载更多" v-else/>
		</view>
		<u-safe-bottom v-if="safeBottom"/>
	</view>
</template>

<script>
	export default {
		name:"load-more",
		props: {
			status: {type: String, default: 'loadmore'},
			safeBottom: {type: Boolean, default: true},
			empty: {type: Boolean, default: true},
			emptyMarginTop: {type: String, default: '100rpx'},
			emptySize: {type:String, default: '300rpx'},
			emptyIcon: {type:String, default: require('@/static/images/empty.png')},
			emptyText: {type:String, default: '暂无任何数据'},
			emptyDesc: {type:String, default: '稍后再试试看吧~'},
		},
		data() {
			return {
				height: '100px'
			};
		},
		created() {
			setTimeout(() => {
				this.height = 'auto'
			}, 100)
		},
	}
</script>

<style lang="scss">

</style>